<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import type { ECharts } from "echarts";

// 图表实例
let salesChart: ECharts | null = null;
let userChart: ECharts | null = null;
let orderChart: ECharts | null = null;
let mapChart: ECharts | null = null;
let rankChart: ECharts | null = null;

// 实时数据
const realTimeData = ref({
  totalSales: "8,892,456",
  todaySales: "89,654",
  totalOrders: "23,656",
  totalUsers: "12,423",
  activeUsers: "1,834",
  conversion: "26.8%"
});

// 初始化图表
onMounted(() => {
  initCharts();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const handleResize = () => {
  salesChart?.resize();
  userChart?.resize();
  orderChart?.resize();
  mapChart?.resize();
  rankChart?.resize();
};

const initCharts = () => {
  // 销售趋势图表
  const salesDom = document.getElementById("salesChart");
  if (salesDom) {
    salesChart = echarts.init(salesDom);
    salesChart.setOption({
      grid: {
        top: 40,
        right: 20,
        bottom: 30,
        left: 50,
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(255, 255, 255, 0.2)"
          }
        }
      },
      xAxis: {
        type: "category",
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.2)"
          }
        },
        axisLabel: {
          color: "#fff"
        }
      },
      yAxis: {
        type: "value",
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.1)"
          }
        },
        axisLabel: {
          color: "#fff"
        }
      },
      series: [
        {
          name: "销售额",
          type: "line",
          smooth: true,
          data: [150, 230, 224, 218, 135, 147],
          lineStyle: {
            width: 3,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#36CFCF"
                },
                {
                  offset: 1,
                  color: "#36CFCF"
                }
              ]
            }
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(54, 207, 207, 0.5)"
              },
              {
                offset: 1,
                color: "rgba(54, 207, 207, 0.1)"
              }
            ])
          },
          itemStyle: {
            color: "#36CFCF",
            borderWidth: 2
          }
        }
      ]
    });
  }

  // 用户分布图表
  const userDom = document.getElementById("userChart");
  if (userDom) {
    userChart = echarts.init(userDom);
    userChart.setOption({
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        right: 10,
        top: "center",
        textStyle: {
          color: "#fff"
        }
      },
      series: [
        {
          name: "用户分布",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["40%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#0B1C51",
            borderWidth: 2
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: "bold",
              color: "#fff"
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: "普通用户", itemStyle: { color: "#36CFCF" } },
            { value: 735, name: "VIP用户", itemStyle: { color: "#4B7CF3" } },
            { value: 580, name: "商家用户", itemStyle: { color: "#FF9931" } },
            { value: 484, name: "游客", itemStyle: { color: "#F95B69" } }
          ]
        }
      ]
    });
  }
};
</script>

<template>
  <div class="visualization-container">
    <div class="header">
      <h1>华衣甄选数据中心</h1>
      <div class="time">{{ new Date().toLocaleString() }}</div>
    </div>

    <div class="dashboard-content">
      <!-- 数据概览 -->
      <div class="data-overview">
        <div class="overview-item">
          <div class="title">总销售额</div>
          <div class="value">¥{{ realTimeData.totalSales }}</div>
          <div class="trend up">
            <el-icon><CaretTop /></el-icon>
            较昨日 +12.5%
          </div>
        </div>
        <div class="overview-item">
          <div class="title">今日销售额</div>
          <div class="value">¥{{ realTimeData.todaySales }}</div>
          <div class="trend up">
            <el-icon><CaretTop /></el-icon>
            较昨日 +8.2%
          </div>
        </div>
        <div class="overview-item">
          <div class="title">总订单量</div>
          <div class="value">{{ realTimeData.totalOrders }}</div>
          <div class="trend up">
            <el-icon><CaretTop /></el-icon>
            较昨日 +6.8%
          </div>
        </div>
        <div class="overview-item">
          <div class="title">转化率</div>
          <div class="value">{{ realTimeData.conversion }}</div>
          <div class="trend down">
            <el-icon><CaretBottom /></el-icon>
            较昨日 -2.3%
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-item sales-trend">
          <div class="chart-header">
            <h3>销售趋势</h3>
          </div>
          <div id="salesChart" class="chart" />
        </div>
        <div class="chart-item user-distribution">
          <div class="chart-header">
            <h3>用户分布</h3>
          </div>
          <div id="userChart" class="chart" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.visualization-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0b1c51 0%, #1c3faa 100%);
  color: #fff;
  padding: 20px;
  overflow: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 20px;

    h1 {
      font-size: 28px;
      font-weight: 600;
      background: linear-gradient(to right, #fff, #36cfcf);
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 2px 10px rgba(54, 207, 207, 0.3);
    }

    .time {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .dashboard-content {
    .data-overview {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 20px;

      .overview-item {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);

        .title {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          margin-bottom: 10px;
        }

        .value {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 10px;
        }

        .trend {
          display: flex;
          align-items: center;
          font-size: 12px;
          gap: 4px;

          &.up {
            color: #36cfcf;
          }

          &.down {
            color: #f95b69;
          }
        }
      }
    }

    .charts-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;

      .chart-item {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);

        .chart-header {
          margin-bottom: 20px;

          h3 {
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
          }
        }

        .chart {
          height: 300px;
        }
      }
    }
  }
}

// 添加动画效果
.visualization-container {
  animation: fadeIn 0.8s ease-out;
}

.overview-item {
  animation: slideUp 0.8s ease-out;
  animation-fill-mode: both;

  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      animation-delay: #{0.1 * $i}s;
    }
  }
}

.chart-item {
  animation: scaleIn 0.8s ease-out;
  animation-fill-mode: both;

  &:nth-child(1) {
    animation-delay: 0.5s;
  }

  &:nth-child(2) {
    animation-delay: 0.7s;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
